<template>
	<view class="dx-body" v-loading="loading">
		<view class="pt-30px pr-30px pl-15px pb-15px info">
			<el-form ref="formRef" class="user-form" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="用户名(账号)" prop="username">
					<el-input placeholder="请输入用户名" readonly v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="昵称" prop="nickname">
					<el-input placeholder="请输入昵称" clearable v-model="form.nickname"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="gender">
					<el-radio-group v-model="form.gender">
						<el-radio :value="1" label="男"></el-radio>
						<el-radio :value="2" label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="头像" prop="avatar">
					<dx-upload v-model="form.avatar" :limit="1"></dx-upload>
				</el-form-item>
				<el-form-item label="手机" prop="mobile">
					<el-input placeholder="请输入手机号码" clearable v-model="form.mobile"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input placeholder="请输入邮箱" clearable v-model="form.email"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" show-password clearable placeholder="请输入密码（为空则不修改）" v-model="form.password"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="rePassword">
					<el-input type="password" show-password clearable placeholder="再次确认密码" v-model="form.rePassword"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="resetForm">重置</el-button>
					<el-button type="primary" @click="submitForm">保存</el-button>
				</el-form-item>
			</el-form>
		</view>
	</view>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import { userInfoStore } from '@/uni_modules/dx-admin/stores/user';
import { editUserInfo } from '@/uni_modules/dx-admin/api/index';
import { onShow } from '@dcloudio/uni-app';
const userStore = userInfoStore();
const formRef = ref();
const loading = ref(false);
const rules = reactive({
	nickname: [
		{ required: true, message: '请输入昵称', trigger: 'blur' },
		{ min: 1, max: 15, message: '长度为1-15个字符', trigger: 'blur' },
	],
	avatar: [{ required: true, message: '请上传头像', trigger: 'blur' }],
	mobile: [
		{ required: true, message: '请输入手机号码', trigger: 'blur' },
		{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' },
	],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: '邮箱格式不正确', trigger: 'blur' },
	],
	password: [{ min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur' }],
	rePassword: [
		{ min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur' },
		{
			validator: (rule: any, value: any, callback: any) => (value === form.password ? callback() : callback(new Error('两次输入密码不一致'))),
			trigger: 'blur',
		},
	],
});
const form = reactive({
	username: '',
	nickname: '',
	gender: '',
	avatar: '',
	mobile: '',
	email: '',
	password: '',
	rePassword: '',
});
function setFormValue(info: any) {
	form.username = info.username;
	form.nickname = info.nickname;
	form.gender = info.gender;
	form.avatar = info.avatar;
	form.mobile = info.mobile;
	form.email = info.email;
}
watch(
	() => userStore.userInfo,
	(newInfo) => {
		setFormValue(newInfo);
	}
);
onShow(() => {
	setFormValue(userStore.userInfo);
});
// 提交表单
const submitForm = () => {
	formRef.value?.validate((valid: boolean) => {
		if (valid) {
			loading.value = true;
			editUserInfo(form)
				.then((res) => {
					if (res.code === 1000) {
						userStore.setUserInfo(res.data);
						ElMessage.success('修改成功');
					} else {
						ElMessage.error(res.message);
					}
				})
				.finally(() => {
					loading.value = false;
				});
		}
	});
};
// 重置表单
const resetForm = () => {
	formRef.value?.resetFields();
};
</script>
<style lang="scss" scoped>
@media (min-width: 1200px) {
	.dx-body {
		.info {
			width: 50vw;
		}
	}
}
</style>
